<template>
  <div :class="['float',isShow == true ? 'active':'']" v-if="isShow"
  
  >
    <a class="float_open"> 打开APP </a>
  </div>
</template>

<script>
export default {
    data(){
        return{
            isShow:false
        }
    },
    mounted(){
        document.addEventListener('scroll',(e)=>{
         
            let height = 230
            if(window.pageYOffset >= height){
                this.isShow = true
            }else{
                this.isShow = false
            }
        })
    },
    destroyed(){
        document.removeEventListener('scroll',document,false)
    }
};
</script>

<style lang="scss" scoped>
.float {
  position: fixed;
  left: 0;
  bottom: 23px;
    z-index: 100000;
  width: 100%;
  height: 36px;
  text-align: center;
  a {
    display: inline-block;
    height: 100%;
    width: 110px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 36px;
    border-radius: 18px;
    background-image: linear-gradient(135deg, #ff8b70 2%, #f86442 99%);
    
  }
}
.float.active{
    animation: show .7s ease;
}
@keyframes show {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


</style>

